<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html
   PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

<html	xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">

	<ui:composition template="template/commonTemplate.xhtml">
	
	<ui:define name="pageMetaData">
	<!-- permet de déclarer une ressource qui se trouve dans le dossier css du dossier parent resources -->
		<!--[if lt IE 9]>
			<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		<link rel="stylesheet" media="all" href="../css/style.css"/>
		<link rel="stylesheet" media="all" href="../css/detailProduct.css"/>
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		<!-- Adding "maximum-scale=1" fixes the Mobile Safari auto-zoom bug: http://filamentgroup.com/examples/iosScaleBug/ -->		
				
		<!-- JS -->
		<script src="../js/jquery-1.7.1.min.js"></script>
		<script src="../js/custom.js"></script>
		<script src="../js/tabs.js"></script>
		<script src="../js/css3-mediaqueries.js"></script>
		<script src="../js/jquery.columnizer.min.js"></script>
		
		<!-- Isotope -->
		<script src="../js/jquery.isotope.min.js"></script>
		
		<!-- Lof slider -->
		<script src="../js/jquery.easing.js"></script>
		<script src="../js/lof-slider.js"></script>
		<link rel="stylesheet" href="../css/lof-slider.css" media="all"  /> 
		<!-- ENDS slider -->
		
		<!-- Tweet -->
		<link rel="stylesheet" href="../css/jquery.tweet.css" media="all"  /> 
		<script src="../js/tweet/jquery.tweet.js" ></script> 
		<!-- ENDS Tweet -->
		
		<!-- superfish -->
		<link rel="stylesheet" media="screen" href="../css/superfish.css" /> 
		<script  src="../js/superfish-1.4.8/js/hoverIntent.js"></script>
		<script  src="../js/superfish-1.4.8/js/superfish.js"></script>
		<script  src="../js/superfish-1.4.8/js/supersubs.js"></script>
		<!-- ENDS superfish -->
		
		<!-- prettyPhoto -->
		<script  src="../js/prettyPhoto/js/jquery.prettyPhoto.js"></script>
		<link rel="stylesheet" href="../js/prettyPhoto/css/prettyPhoto.css"  media="screen" />
		<!-- ENDS prettyPhoto -->
		
		<!-- poshytip -->
		<link rel="stylesheet" href="../js/poshytip-1.1/src/tip-twitter/tip-twitter.css"  />
		<link rel="stylesheet" href="../js/poshytip-1.1/src/tip-yellowsimple/tip-yellowsimple.css"  />
		<script  src="../js/poshytip-1.1/src/jquery.poshytip.min.js"></script>
		<!-- ENDS poshytip -->
		
		<!-- JCarousel -->
		<script type="text/javascript" src="../js/jquery.jcarousel.min.js"></script>
		<link rel="stylesheet" media="screen" href="../css/carousel.css" /> 
		<!-- ENDS JCarousel -->
		
		<!-- GOOGLE FONTS -->
		<link href='http://fonts.googleapis.com/css?family=Voltaire' rel='stylesheet' type='text/css'/>

		<!-- modernizr -->
		<script src="../js/modernizr.js"/>
		
		<!-- SKIN -->
		<link rel="stylesheet" media="all" href="../css/skin.css"/>
		
		<!-- Less framework -->
		<link rel="stylesheet" media="all" href="../css/lessframework.css"/>
		
		<!-- flexslider -->
		<link rel="stylesheet" href="../css/flexslider.css" />
		<script src="../js/jquery.flexslider.js"></script>
	</ui:define>
	
  	<ui:define name="styles">
  	
  	</ui:define>
  	
  	<ui:define name="title">Bustle</ui:define>
  	
  	<ui:define name="content" id="content">
		<div id="main">
			<div class="wrapper cf">
				<h:form>
	        	<div id="portfolio-content" class="cf"  style="margin-bottom: 0;">
					<div id="project-box" class="cf" style="margin: 0; height: 350px;">
		        		<div class="entry-content" style="margin: 30px;">
		        			<h2 class="heading"  style="margin-bottom: 0;"><h:outputLabel value="#{product.product.name}"/></h2><br/><br/>
		        			<div>
	        					<div class="imageProductDetail">
									<img src="../#{product.product.image}" alt="alt" />
								</div>
								<div class="contenuProductDetail">
									<h5>Catégorie : </h5>
									<h:outputText value="#{product.product.productType.name}" class="text"></h:outputText>
									<br/><br/>
									<h5>Description : </h5>
									<h:outputText value="#{product.product.description}" class="text"></h:outputText>
									<br/><br/>
									<h5>Date limite d'achat : </h5>
									<h:outputText value="#{product.product.limitedDate}" class="text">
										<f:convertDateTime pattern="dd/MM/yyy" timeZone="Europe"></f:convertDateTime>
									</h:outputText>
									<br /><br/>
									<h5>Prix : </h5>
									<h:outputText value="#{product.product.price}€" class="text"></h:outputText>
									<h:commandButton value="Acheter"
										actionListener="#{product.addToCartFromDetail}" class="acheterDetail">
										<f:attribute name="pAdd" value="#{p.idProduct}"></f:attribute>
									</h:commandButton>
								</div>
		        			</div>
		        		</div>
		        	</div>
	    		</div>
    			
	    		<div id="portfolio-content" class="cf">
					<div id="project-box" class="cf">
						<div class="info"  style="margin: 30px; width: 500px; float: left;">
							<h2 class="heading">Partenaire</h2><br/><br/>
		        			<h5>Nom : </h5>
		        			<h:outputText value="#{product.provider.name}" class="text"></h:outputText>
		        			<br/><br/>
		        			<h5>Description : </h5>
		        			<h:outputText value="#{product.provider.description}" class="text"></h:outputText>
		        			<br/><br/>
		        			<h5>Adresse : </h5>
		        			<h:outputText value="#{product.provider.address.name_street}" class="text"></h:outputText>&nbsp;
		        			<h:outputText value="#{product.provider.address.postcode}" class="text"></h:outputText>&nbsp;
		        			<h:outputText value="#{product.provider.address.city}" class="text"></h:outputText>
		        			<br/>
		        			<a href="#{product.provider.map}">Voir sur la carte</a>
		        			<br/><br/>
		        			<h5>Téléphone : </h5>
		        			<h:outputText value="#{product.provider.phoneNumber}" class="text"></h:outputText>
		        			<br/><br/>
		        			<h5>Mail : </h5>
		        			<h:outputText value="#{product.provider.email}" class="text"></h:outputText>
		        			<br/><br/>
		        		</div>
		        		<div class="logo">
		        			<img src="../#{product.provider.image}" alt="alt" />
		        		</div>
		        	</div>
		        </div>
			</h:form>
			</div>
		</div>
  	</ui:define>
  	
</ui:composition>
</html>